<template>
  <transition name="el-fade-in">
    <div v-show="light">
      {{ count }}
      <a-button type="primary" @click="addCount">数字增加</a-button>
      <div>
        <div class="bodyDiv">主题文字</div>
        <a-button type="primary" @click="chageTheme">切换主题样式</a-button>
      </div>
      <div class="borderBox">怪异盒模型</div>
      <p>audio - source</p>
      <div class="audioDiv">
        <audio controls>
          <source src="./hello.mp3" type="audio/mp3" />
        </audio>
      </div>
      <el-input
        v-model="input"
        style="width: 240px"
        placeholder="Please input"
      />
    </div>
  </transition>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getTickerLogin } from "@/api/login";
// import $store from "@/store/index.js";
const count = ref("1");
const addCount = () => {
  count.value++;
};
const input = ref("");
const apiFn = () => {
  // getTickerLogin({a:1111}).then((res) => {
  //   console.log(res);
  // });
};
onMounted(() => {
  // console.log($store.state.name);
  apiFn();
  // $store.dispatch('setNameAction','小张');
  // console.log($store.state.name);
});
let light = true;
// 切换主题
const chageTheme = () => {
  light = !light;
  if (light) {
    document.documentElement.setAttribute("theme", "light");
    document.querySelector("html")?.classList.remove("dark");
    document.querySelector("html")?.classList.add("light");
  } else {
    document.documentElement.setAttribute("theme", "dark");
    document.querySelector("html")?.classList.remove("light");
    document.querySelector("html")?.classList.add("dark");
  }
};
</script>

<style scope lang="scss">
.bodyDiv {
  background-color: var(--bg-color);
  color: var(--text-color);
}
.borderBox {
  width: 100px;
  background: red;
  height: 100px;
  padding: 5px;
  margin: 5px;
  border: 5px solid #f00;
}
.audioDiv {
  background-color: var(--bg-color);
  padding: 40px;
}
</style>
